<template lang="html">
  <div class="order-item" v-if="item">
    <div class="head">
      <div class="shop-info">
        <i class="icon-shop"> <img class="max" src="/static/pingtuan/order/order_icon_shop@2x.png"> </i>
        <span class="shop-name">{{ item.shop_name }}</span>
        <i class="icon-arrow"><img class="max" src="/static/pingtuan/goods/details_icon_arrows@2x.png"></i>
      </div>
      <div class="orderNo">
        订单号：{{ item.pt_order_code }}
      </div>
    </div>

    <div class="wrap" @click="fnOpenOrderDetail(item)">
      <div class="pic">
        <img class="max" :src="item.goods_icon">
      </div>
      <div class="content">
        <div class="title">
          {{ item.pt_goods_name }}
        </div>
        <div class="tag" v-if="item.pt_code != 'A'">
          {{ item.pt_number }}人团
        </div>
        <div class="prices">
          <div class="present-price">
             {{ item.pt_code != 'A'?'拼团价：':'价格：' }} <span><em>￥</em>{{ item.pt_price }}</span>
          </div>
          <div class="purchase-price">
            原价： <span>¥{{ item.price }}</span>
          </div>
        </div>
        <div class="state"  v-if="item.pt_code != 'A'">
          <img class="max" v-if="item.pt_info.pt_status == '拼团失败'" src="/static/pingtuan/details_img_defeated@2x.png" alt="拼团失败">
          <img class="max" v-else-if="item.pt_info.pt_status == '拼团中'" src="/static/pingtuan/details_img_spelling@2x.png" alt="拼团中">
          <img class="max" v-else-if="item.pt_info.pt_status == '拼团成功'" src="/static/pingtuan/details_img_succeed@2x.png" alt="拼团成功">
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="state-text">
        {{ item.pt_code == 'A'?item.order_status:item.pt_status }}
      </div>
      <div class="btns">
        <div class="btn btn-default" @click="clickPtDetail(item)" v-if="item.pt_code != 'A'">
          查看团详情
        </div>
        <div class="btn btn-primary" v-if="item.pt_code == 'A' && item.order_status == '未付款'" @click="clickPtPay(item)">
          立即支付
        </div>
        <div class="btn btn-primary" v-if="item.pt_code != 'A' && item.pt_status == '未付款' && item.pt_info.pt_status != '拼团失败'" @click="clickPtPay(item)">
          立即支付
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { ptOrderPay } from "@/api/pingtuan"
import { Toast } from "mint-ui";
export default {
  props: ['item'],
  created() {
    console.log(this.item)
  },
  methods: {
    // 点击订单详情
    clickOrderDetail() {

    },
    /**
     * @desc 点击跳转到订单详情页面
     * @params {Object}  item 订单当前对象
     */
    fnOpenOrderDetail(item) {
      this.$router.push({
        path: "/pingtuan/order/detail",
        query: {
          order_no: item.pt_order_code,
          order_id: item.id,
          get_type: item.pt_code == 'A'?'buy':''
        }
      });
    },
    // 查看拼团详情
    clickPtDetail(item) {
      this.$router.push({
        path: "/pingtuan/detail",
        query: {
          order_no: item.pt_order_code,
          order_id: item.id,
          get_type: item.pt_code == 'A'?'buy':''
        }
      });
    },

    // 立即支付
    clickPtPay(item) {
      var _this = this;
      ptOrderPay({
        openid: this.getUserInfo().openid,
        order_code: '['+ item.id +']',
        pay_type: item.pt_code == 'A'?'pt_buy':'pt_goods',
        total_fee: item.pt_price,
      }).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.wxChooseWXPay({
            appId: res.data.appid,
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            sign: res.data.sign,
            package: res.data.package,
            callback: function(res) {
              _this.payStatusSuccess(res, item);
            },
            errCallback: function() {
              _this.payStatusFail('', item);
            }
          })
        }else{
          Toast(res.msg)
          // 1s后调转到支付状态页面
          setTimeout(()=>{
            this.$router.push({
              path: '/pingtuan/payStatus',
              query: {
                payStatus: 'fail',
                orderCode: item.pt_order_code
              }
            })
          }, 2000)
        }
      })
    },

    // 支付成功
    payStatusSuccess(res, item) {
      var _this = this;
      if(res && res.errMsg == "chooseWXPay:ok"){
        Toast({
          message: "支付成功",
          duration: 2000
        });

        // 2s后调转到支付状态页面
        setTimeout(()=>{
          _this.$router.push({
            path: '/pingtuan/payStatus',
            query: {
              payStatus: 'success',
              orderCode: item.pt_order_code
            }
          })
        }, 2000)
      }else{
        this.payStatusFail('fail', item);
      }
    },

    // 支付失败
    payStatusFail(val, item) {
      var _this = this;
      Toast({
        message: val == 'fail'?'支付失败':'取消支付',
        duration: 2000
      });

      // 2s后调转到支付状态页面
      setTimeout(()=>{
        _this.$router.push({
          path: '/pingtuan/payStatus',
          query: {
            payStatus: 'fail',
            orderCode: item.pt_order_code
          }
        })
      }, 2000)
    }

  }
}
</script>

<style lang="scss" scoped>
  .order-item{
    background-color: #fff;
    .head{
      overflow: hidden;
      border-bottom: 1px solid #eee;
      padding-bottom: .2rem;
      padding-top: .1rem;
      margin-bottom: .3rem;
      .shop-info{
        float: left;
        font-size: .3rem;
        .shop-name{
          display: inline-block;
          width: 3rem;
          overflow: hidden;
          text-overflow:ellipsis;
          vertical-align: middle;
          margin-top: -.1rem;
          white-space: nowrap;
        }
        .icon-shop{
          display: inline-block;
          width: .3rem;
          vertical-align: middle;
          margin-top: -.2rem;
        }
        .icon-arrow{
          display: inline-block;
          width: .45rem;
          vertical-align: middle;
          margin-top: -.1rem;
        }
      }
      .orderNo{
        float: right;
        color: #666;
        font-size: .3rem;
      }
    }
    .wrap{
      overflow: hidden;
      .content{
        float: left;
        width: 5.4rem;
        margin-left: .3rem;
        position: relative;
        .state{
          position: absolute;
          right: 0;
          width: 1.6rem;
          top: 50%;
          margin-top: -.8rem;
        }
        .title{
          font-size: .42rem;
          margin-bottom: .2rem;
          min-height: 1rem;
        }
        .tag{
          border: 1px solid #FF0000;
          color: #FF0000;
          font-size: .24rem;
          padding: 0 .1rem;
          margin-right: .3rem;
          display: inline-block;
          margin-bottom: .2rem;
        }
        .prices{
          margin-top: .3rem;
          .present-price{
            display: inline-block;
            font-size: .32rem;
            font-weight: 600;
            em{
              font-size: .3rem;
              padding-right: .05rem;
              font-style: normal;
              font-weight: 100;
            }
            span{
              font-size: .44rem;
            }
          }
          .purchase-price{
            display: inline-block;
            color: #A09A9B;
            font-size: .3rem;
            span{
              text-decoration: line-through;
            }
          }
        }
      }
    }
    .pic{
      width: 3rem;
      height: 3rem;
      float: left;
    }
    .foot{
      overflow: hidden;
      border-top: 1px solid #eee;
      padding-top: .3rem;
      margin-top: .3rem;
      .state-text{
        float: left;
        line-height: .8rem;
        font-size: .34rem;
      }
      .btns{
        float: right;
      }
    }
  }
  .btn{
    display: inline-block;
    border-radius: 1rem;
    border: 1px solid #333;
    color: #333;
    font-size: .3rem;
    text-align: center;
    padding: .12rem .22rem;
    margin-left: .2rem;
  }
  .btn-default{
    border-color: #333;
    color: #333;
  }
  .btn-primary{
    border-color: #FF0000;
    color: #FF0000;
  }
</style>
